<template>
  <div class="pharmacy">
    <div>
      <img src="../assets/images/sda.png" alt="" style="float:left;width:20px">
      <p style="margin-left: 30px;">用药统计</p>
    </div>
    <div class="char">
      <e-charts autoresize :option="option" style="height: 250px;"></e-charts>
    </div>
    <div class="char">
      <e-charts autoresize :option="option" style="height: 250px;"></e-charts>
    </div>
    <div class="char">
      <e-charts autoresize :option="options" style="height: 250px;"></e-charts>
    </div>
  </div>
</template>

<script>
  import {homes} from "../api/home/home";

  export default {
        name: "pharmacy",
      data() {
        return {
          option:  {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 580, name: 'Email' },
                  { value: 300, name: 'Video Ads' }
                ]
              }
            ]
          },
          options : {
            title: {
              text: 'Funnel'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            legend: {
              data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
            },
            series: [
              {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: [
                  { value: 60, name: 'Visit' },
                  { value: 40, name: 'Inquiry' },
                  { value: 20, name: 'Order' },
                  { value: 80, name: 'Click' },
                ]
              }
            ]
          }
        };
      },
    created(){
      this.homes()
    },
    methods:{
        homes(){
          homes().then(res=>{
            console.log(res)
          }).catch(err=>{
            console.log(err)
          })
        }
    },
    }
</script>

<style scoped>
  .pharmacy{
    width: 100%;
  }
  .char{
    width: 31%;
    height: 250px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px 0px rgba(51,51,51,0.08);
    border-radius: 8px;
    float: left;
    margin-right: 20px;
  }
</style>
